import React, {Component} from 'react';
import GreatGrandson from "./GreatGrandson";
import style from './GreatGrandson.module.css'

/*style='border:1px solid #cccccc'*/
function Body(props) {

  return (<div className={style.border}>
    <h2>函数式组件接收父组件的值</h2>
    <div>姓名:{props.name}</div>
    <div>外号:{props.nickname}</div>
    <div>左边:{props.left}</div>
    <div>右边:{props.right}</div>
    <div>年龄:{props.age}</div>
  </div>)
}

let list = ['老婆1', '老婆2', '老婆3', '老婆4', '老婆5'];

class Crandson2 extends Component {
  /*只要涉及到视图改变的数据 就必须放在state中*/
  state = {
    name: 'hello'
  };

  render() {
    return (
      <div>
        {/*<div>{this.props.name}</div>*/}
        {/*<div>{this.props.left}</div>*/}
        <h4 onClick={()=>{
          list.push('老婆6');
          console.log(list);
        }}>{this.state.name}</h4>
        {
          list.map(item=><div>
            <h2>{item}</h2>
          </div>)
        }
        <GreatGrandson {...this.props}/>
        <Body {...this.props}/>
      </div>
    );
  }
}

export default Crandson2;
